<!--
 /**
 * Author: hongChengHao
 * Date: 2022-07-23 18:03
 * Desc: 插入公众号教程说明 PublicDes
 */
-->
<template>
  <view class="public-des mb30">
    <view class="mb15 public-des__title"
      ><text class="public-des__circle"></text><slot name="title"
    /></view>
    <view class="mb20 fs24 fc8"><slot name="subTitle" /></view>
    <view>
      <image v-if="getCurrenImg" :src="getCurrenImg" @click="onPreview"></image>
      <slot name="img"></slot>
    </view>
  </view>
</template>

<script>
  // import { previewImage } from '@/utils/tools.ts'
  export default {
    name: 'PublicDes',
    props: {
      url: {
        type: [String, Array],
        default: ''
      }
    },
    data() {
      return {}
    },
    computed: {
      getCurrenImg() {
        return this.url instanceof Array ? this.url[0] : this.url
      }
    },
    methods: {
      onPreview() {
        const url = this.url instanceof Array ? this.url : [this.url]
        this.$tools.previewImage(0, url)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .public-des {
    &__title {
      display: flex;
      align-items: center;
      font-size: 28upx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #3bc5d2;
    }
    &__circle {
      display: block;
      width: 28upx;
      height: 28upx;
      border-radius: 50%;
      background: #3bc5d2;
      margin-right: 8upx;
    }
  }
</style>
